<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>钻石之家---购物车</title>
    <style>
        .table-new{
            border: 0;
        }
        .table-new td{
            border: 0;
        }

        #cart_reduce,#cart_add{
            cursor:pointer;
        }

        .address{
            border: 1px solid red;
        }
        .new_address{
            margin-left: 75px;
            margin-top: 50px;
        }

    </style>
</head>
<body>
{:widget('Cate/header')}
<div class="breadcrumbs">
    <div class="container_12">
        <div class="grid_12">
            <a href="index.html">Home</a><span></span><a href="#">Category</a><span></span><span class="current">This page</span>
        </div><!-- .grid_12 -->
    </div><!-- .container_12 -->
</div><!-- .breadcrumbs -->

<section id="main">
    <div class="container_12">
        <div id="content" class="grid_12">

            <article>
                <table class="cart_product layui-form" id="test">
                    <tr class="bg">
                        <!--<td class="check" width="30"><input type="checkbox" lay-skin="primary" ></td>-->
                        <th class="images">缩略图</th>
                        <th class="name">商品信息</th>
                        <th class="price">商品单价</th>
                        <th class="qty" style="width: 200px">购买数量</th>
                        <th class="subtotal">合计</th>
                        <th class="close">删除</th>
                    </tr>
                {foreach $data as $val}
                    <tr id="foreachs">
                        <td class="images"><a href="/lists/detail/id/{$val['goods_id']}"><img src="/uploads/goods_pic/{$val.goods_pic}" alt="Product 12" title="" height="200px"></a></td>
                        <td class="name">
                            <span>商品名：</span> <b>{$val.goods_name}</b>
                            <br/>
                            <br/>
                            <span>商品简介：</span><span>{$val.goods_overview}</span>
                            <br/>
                            <br/>
                            <span>商品型号：</span>
                                <span>
                                    {$val.model}
                                </span>

                        </td>
                        <td class="price">￥<i>{$val.goods_price}</i></td>
                        <td class="qty" >
                            <table class="table-new" align="center" >
                                <tr id="cart_num">
                                    <td align="right" >
                                        <i id="cart_reduce" onclick="cart_reduce(this)" class="iconfont " style="font-size: 25px;">&#xe602;</i>
                                        &nbsp;
                                        &nbsp;
                                    </td>
                                    <td width="30px">
                                        <input type="hidden" id="goods_id" value="{$val.id}">
                                        <input id="cart_input" onchange="cart_input(this)" type="text" name="" value="{$val.cart_num}" placeholder="" style="width: 40px;height: 25px" >
                                    </td>
                                    <td align="left" >
                                        &nbsp;
                                        &nbsp;
                                        <i id="cart_add"  onclick="cart_add(this)" class="iconfont" style="font-size: 25px; ">&#xe501;</i>
                                    </td>
                                </tr>
                            </table>

                        </td>
                        <td class="subtotal" style="color: red" id="total_price">￥<i><?php echo $val['goods_price']*$val['cart_num'] ?></i></td>
                        <td class="close">
                            <input type="hidden" name="goods_num" value="{$val.goods_num}" id="goods_num">
                            <input type="hidden" name="cart_id" value="{$val.cart_id}">
                            <a title="close" class="close" href="javascript:;" goods_id="{$val.goods_id}" goods_model="{$val.goods_model}" onclick="cart_delete(this)" ></a>
                        </td>
                    </tr>
                {/foreach}
                </table>
                <div id="cart_forms">

                <div class="grid_4" style="float: right" >
                    <div class="bottom_block total" style="height: 150px;">
                        <table class="subtotal" style="margin-top: 30px">
                            <tr class="grand_total">
                                <td>商品总价</td><td class="price" id="prices">￥<b>0.00</b></td>
                            </tr>
                        </table>
                        <button class="checkout" onclick="window.location='/checkout/index'" style="margin-top: 50px">结算购物车<img src="/static/home/img/checkout.png" alt="" title=""></button>
                    </div>
                </div>

                <div class="clear"></div>
                </div>
            </article>
            </div><!-- .related -->

            <div class="clear"></div>
        </div><!-- #content -->

        <div class="clear"></div>
    </div><!-- .container_12 -->

</section><!-- #main -->
<div class="clear"></div>

{:widget('Cate/footer')}
</body>
<script>

    layui.use(['form','layer','table'], function() {
        //弹窗
        var layer = layui.layer;
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            //layer.msg(JSON.stringify(data.field));

            //进行验证成功后的提交
            $.ajax({
                type: 'post',
                dataType: "json",
                data:data.field,
                url: '{:url("/cart/address")}',
                success: function (data) {
                    if (data.status == 0){
                        layer.msg(data.msg, {icon: 6,time:1000}, function () {
                             var index = parent.layer.getFrameIndex(window.name);
                             parent.location.reload(); //刷新父页面
                             parent.layer.close(index);
                        });
                    }else{
                        layer.msg(data.msg, {icon: 1,time:1000});
                    }
                },
                error: function (XmlHttpRequest, textStatus, errorThrown) {
                }
            });
            return false;
        });
    });
    //点击弹出
    function address() {
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['600px', '600px'],
//            shade: false,
            title: '添加收货地址',
            content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function(){
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
            }
        });
    }
    //减少
    function cart_reduce(obj) {
        var input=$(obj).parents('#cart_num').find('#cart_input');
        var num=input.val();
        num1 = parseInt(num)-1;
        if(num1<1){
            num1=1;
            layer.msg('商品数量必须大于 1 ',{icon:2,time:1000});
            return null;
        }
        $(obj).parents('#cart_num').find('#cart_input').val(num1);
        //触发变化事件
        $(obj).parents('#cart_num').find('#cart_input').trigger('change');
        //让总金额变化
        var price=$(obj).parents('.qty').prev().find("i").html();
        total=parseInt(price)*parseInt(num1);
        $(obj).parents('.qty').next().find("i").html(total);
        var prices=$('#prices').find('b').html();
        var totals=0;
        $('td[id=\'total_price\']').each(function(){
            totals += parseInt($(this).find('i').html());
        });
        totals=totals.formatMoney();
        $('#prices').find('b').html(totals);


    }
    //增加
    function cart_add(obj) {
        var num=$(obj).parents('#cart_num').find('#cart_input').val();
        num2 = parseInt(num)+1;
        goods_num=$(obj).parents('#foreachs').find('#goods_num').val();
        if(num2>goods_num){
            num2=goods_num;
            layer.msg('商品库存为'+goods_num,{icon:2,time:1000});
            return null;
        }
        $(obj).parents('#cart_num').find('#cart_input').val(num2);
        $(obj).parents('#cart_num').find('#cart_input').trigger('change');
        var price = $(obj).parents('.qty').prev().find("i").html();
        total = parseInt(price) * parseInt(num2);
        $(obj).parents('.qty').next().find("i").html(total);
        var prices=$('#prices').find('b').html();
        var totals=0;
        $('td[id=\'total_price\']').each(function(){
            totals += parseInt($(this).find('i').html());
        });
        totals=totals.formatMoney();
        $('#prices').find('b').html(totals);

    }
    //获取input内容的变化进行函数
    function cart_input(obj){
        num3=$(obj).parents('#cart_num').find('#cart_input').val();
        //商品总数
        goods_num=$(obj).parents('#foreachs').find('#goods_num').val();
        if(num3<1){
            num3=1;
            layer.msg('商品数量必须大于 1 ',{icon:2,time:1000});
            $(obj).parents('#cart_num').find('#cart_input').val(num3);
            cart_input(obj);
            return null;
        }
        if(num3>parseInt(goods_num)){
            num3=goods_num;
            layer.msg('商品库存为'+goods_num,{icon:2,time:1000});
            $(obj).parents('#cart_num').find('#cart_input').val(num3);
            cart_input(obj);
            return null;
        }
        id=$(obj).parents('#cart_num').find('#goods_id').val();
        var price=$(obj).parents('.qty').prev().find("i").html();
        total=parseInt(price)*parseInt(num3);
        $(obj).parents('.qty').next().find("i").html(total);
        $.post('/cart/cart_num',{'num':num3,'id':id},function (data){
            if(data.status==0){
                layer.msg(data.msg,{icon:1,time:1000});
                //总得价格计算
                var prices=$('#prices').find('b').html();
                var totals=0;
                $("td[id='total_price']").each(function(){
                    totals += parseInt($(this).find('i').html());
                });
                totals=totals.formatMoney();
                $('#prices').find('b').html(totals);
            }
        },'json');

    }
    //购物车删除商品的计算
    function cart_delete(obj) {
        var goods_id=$(obj).attr('goods_id');
        var goods_model=$(obj).attr('goods_model');
        //通过id去删除购物车的商品
        $.post('/cart/cart_delete',{'id':goods_id,'goods_model':goods_model},function (data) {
            if(data.status==0){
                $(obj).parents("tr").remove();
                layer.msg(data.msg,{icon:1,time:1000});
            }else{
                layer.msg(data.msg,{icon:1,time:1000})
            }
        },'json')
    }
    //总金额的计算
    $().ready(function check_id(){
        //获取选中的商品
        //ar total_price=$("input[name='checkid']:checked").parents('table').find('td[id=\'total_price\']');
        //总得价格计算
        var prices=$('#prices').find('b').html();
        var totals=0;
        $('td[id=\'total_price\']').each(function(){
            totals += parseInt($(this).find('i').html());
        });
        totals=totals.formatMoney();
        $('#prices').find('b').html(totals);
    });
    //数字转金额样式
    Number.prototype.formatMoney = function (places, symbol, thousand, decimal) {
        places = !isNaN(places = Math.abs(places)) ? places : 2;
        symbol = symbol !== undefined ? symbol : "￥";
        thousand = thousand || ",";
        decimal = decimal || ".";
        var number = this,
            negative = number < 0 ? "-" : "",
            i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "",
            j = (j = i.length) > 3 ? j % 3 : 0;
        return negative + (j ? i.substr(0, j) + thousand : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) + (places ? decimal + Math.abs(number - i).toFixed(places).slice(2) : "");
    };
    //button的提交
    //城市级联
    $(function(){
        $("#province").ProvinceCity()});
</script>
</html>